<template>
  <div class="equipment-oee-page">
    <div class="page-header">
      <h2>
        <el-icon><DataAnalysis /></el-icon>
        设备效率(OEE)分析
      </h2>
      <div class="header-actions">
        <el-date-picker 
          v-model="dateRange" 
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
        <el-button type="primary" @click="handleExport">
          <el-icon><Download /></el-icon>
          导出报表
        </el-button>
      </div>
    </div>

    <!-- OEE指标卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-label">OEE综合效率</div>
            <div class="stat-value" style="color: #67c23a">85.2%</div>
            <el-progress :percentage="85.2" color="#67c23a" :show-text="false" />
            <div class="stat-compare">
              <el-icon color="#67c23a"><CaretTop /></el-icon>
              <span>较上月 +3.2%</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-label">时间稼动率</div>
            <div class="stat-value" style="color: #409eff">92.5%</div>
            <el-progress :percentage="92.5" color="#409eff" :show-text="false" />
            <div class="stat-compare">
              <el-icon color="#67c23a"><CaretTop /></el-icon>
              <span>较上月 +1.8%</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-label">性能稼动率</div>
            <div class="stat-value" style="color: #e6a23c">88.7%</div>
            <el-progress :percentage="88.7" color="#e6a23c" :show-text="false" />
            <div class="stat-compare">
              <el-icon color="#f56c6c"><CaretBottom /></el-icon>
              <span>较上月 -0.5%</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-label">良品率</div>
            <div class="stat-value" style="color: #67c23a">98.1%</div>
            <el-progress :percentage="98.1" color="#67c23a" :show-text="false" />
            <div class="stat-compare">
              <el-icon color="#67c23a"><CaretTop /></el-icon>
              <span>较上月 +0.3%</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 设备OEE排行 -->
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="chart-card">
          <template #header>
            <span>设备OEE排行</span>
          </template>
          <el-table :data="equipmentRanking" stripe max-height="400">
            <el-table-column type="index" label="排名" width="60" />
            <el-table-column prop="equipmentName" label="设备名称" min-width="150" />
            <el-table-column prop="oee" label="OEE" width="120">
              <template #default="{ row }">
                <el-progress :percentage="row.oee" :color="getOEEColor(row.oee)" />
              </template>
            </el-table-column>
            <el-table-column prop="availability" label="时间稼动率" width="120">
              <template #default="{ row }">
                {{ row.availability }}%
              </template>
            </el-table-column>
            <el-table-column prop="performance" label="性能稼动率" width="120">
              <template #default="{ row }">
                {{ row.performance }}%
              </template>
            </el-table-column>
            <el-table-column prop="quality" label="良品率" width="100">
              <template #default="{ row }">
                {{ row.quality }}%
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="chart-card">
          <template #header>
            <span>损失分析</span>
          </template>
          <div class="loss-analysis">
            <div class="loss-item">
              <div class="loss-label">计划停机</div>
              <el-progress :percentage="12.5" color="#909399" />
              <div class="loss-value">12.5小时</div>
            </div>
            <div class="loss-item">
              <div class="loss-label">故障停机</div>
              <el-progress :percentage="8.3" color="#f56c6c" />
              <div class="loss-value">8.3小时</div>
            </div>
            <div class="loss-item">
              <div class="loss-label">速度损失</div>
              <el-progress :percentage="11.3" color="#e6a23c" />
              <div class="loss-value">11.3%</div>
            </div>
            <div class="loss-item">
              <div class="loss-label">质量损失</div>
              <el-progress :percentage="1.9" color="#409eff" />
              <div class="loss-value">1.9%</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 趋势分析 -->
    <el-card class="chart-card">
      <template #header>
        <span>OEE趋势分析</span>
      </template>
      <div class="trend-tip">
        <el-empty description="图表组件需要集成 ECharts，此处为演示界面" />
        <p class="tip-text">实际使用时可集成 ECharts 展示折线图、柱状图等</p>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { DataAnalysis, Download, CaretTop, CaretBottom } from '@element-plus/icons-vue'

const dateRange = ref([])

const equipmentRanking = ref([
  { equipmentName: '数控车床-01', oee: 92.5, availability: 95, performance: 97, quality: 100 },
  { equipmentName: '加工中心-02', oee: 88.3, availability: 92, performance: 96, quality: 100 },
  { equipmentName: '冲压机-03', oee: 85.7, availability: 90, performance: 95, quality: 100 },
  { equipmentName: '焊接机-04', oee: 82.1, availability: 88, performance: 93, quality: 100 },
  { equipmentName: '数控车床-02', oee: 78.5, availability: 85, performance: 92, quality: 100 }
])

const getOEEColor = (oee) => {
  if (oee >= 85) return '#67c23a'
  if (oee >= 75) return '#e6a23c'
  return '#f56c6c'
}

const handleExport = () => {
  ElMessage.success('导出成功')
}
</script>

<style scoped>
.equipment-oee-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
}

.page-header h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  height: 100%;
}

.stat-content {
  text-align: center;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 32px;
  font-weight: bold;
  margin: 10px 0;
}

.stat-compare {
  margin-top: 10px;
  font-size: 13px;
  color: #606266;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.chart-card {
  margin-bottom: 20px;
}

.loss-analysis {
  padding: 20px 0;
}

.loss-item {
  margin-bottom: 25px;
}

.loss-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.loss-value {
  font-size: 13px;
  color: #909399;
  margin-top: 5px;
}

.trend-tip {
  padding: 40px;
  text-align: center;
}

.tip-text {
  color: #909399;
  margin-top: 10px;
}
</style>
